import React, {useEffect, useState} from "react";
import {Skeleton, Table, Avatar, Input, Space, Button, Tag} from "antd";
import {PageData} from "../../../../types";
import {fetch, MethodEnum} from "f22";
import {ColumnsType} from "antd/lib/table";
import {SearchOutlined} from "@ant-design/icons";

const {Search} = Input;

interface UserPo {
  id: number,
  nickname: string,
  avatarUrl: string,
  gender: number,
  country: string,
  province: string,
  city: string,
  mobile: string,
  createdAt: string,
  getIsAdmin: number
}

export default () => {

  const getColumnSearchProps = (onSearch: (value: string) => void) => ({
    filterDropdown: () => (
      <Search
        allowClear
        placeholder="请输入搜索内容"
        onSearch={value => onSearch(value)}
        enterButton
      />
    ),
    filterIcon: filtered => <SearchOutlined style={{color: filtered ? '#1890ff' : undefined}}/>,
  });

  const columns: ColumnsType<UserPo> = [
    {
      title: '编号',
      dataIndex: 'id',
    },
    {
      title: '头像',
      align: "center",
      dataIndex: "avatarUrl",
      render: (text, r, index) => {
        return <>
          <Avatar size={64} src={text}/>
        </>
      }
    },
    {
      title: '微信昵称',
      dataIndex: 'nickname',
      ...getColumnSearchProps((value) => setLikeNickname(value))
    },
    {
      title: '国家',
      dataIndex: 'country',
    },
    {
      title: '省份',
      dataIndex: 'province',
    },
    {
      title: '城市',
      dataIndex: 'city',
      ...getColumnSearchProps((value) => setLikeCity(value))
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      ...getColumnSearchProps((value) => setLikeMobile(value))
    },
    {
      title: '后台管理员',
      dataIndex: 'getIsAdmin',
      align: "center",
      render: (text) => {
        if (text == 0)
          return (<Tag color="#f50">
            否
          </Tag>)
        return (<Tag color="#2db7f5">
          是
        </Tag>)
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
    }
  ];

  const [data, setData] = useState<PageData<UserPo> | null>(null);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [likeNickname, setLikeNickname] = useState("") // 昵称
  const [likeCity, setLikeCity] = useState("") // 城市
  const [likeMobile, setLikeMobile] = useState("") // 手机


  useEffect(() => {
    fetch({
      url: "/admin/user/list",
      method: MethodEnum.GET,
      request: {
        page,
        pageSize,
        likeNickname,
        likeCity,
        likeMobile
      }
    }).then(data => {
      setData(data.response)
    })
  }, [page, pageSize, likeNickname, likeCity, likeMobile])


  if (data == null) return <Skeleton/>
  return <Table<UserPo>
    bordered
    dataSource={data?.records}
    columns={columns}
    rowKey={(r) => r.id}
    pagination={
      {
        pageSize: pageSize,
        pageSizeOptions: ["10", "20", "50"],
        total: data.total,
        showTitle: true,
        current: page,
        onChange(p, ps) {
          if (p !== page) setPage(p)
          if (ps !== pageSize && !!ps) setPageSize(ps)
        }
      }
    }/>;
}
